このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

004_1レスポンシブ対応にする

以下覚え書き


cssの切り替え方法

ひとつの style.css の中にまとめて記述して「PC用」「タブレット用」「スマホ用」を切り替える方法と、 「style.css(PC用)」「style_tablet.css(タブレット用)」「style_smart.css(スマホ用)」の3つの cssファイルを作って切り替える方法、とがありますが、

修正のしやすさ、メンテナンスの使い勝手を考えるなら、後者の3つのcssファイルを作る方がいいと思う。

wordpressのテーマに入れるスタイルシートのファイル名は、「style.css」にするという決まりがあるので、PC用の名前は、style.cssのまま変えない方がよいと思う。

画面サイズ

PC (横幅:960px)
iPhone 4 / 4S (縦:640×960 横:960×640)
iPad (縦:768×1024px 横:1024×768px)


外部CSS記述(3つのcssを作り、振り分けて記述、それを読み込ませる)

header.phpの中に記述)

	<!--PC用CSS-->
	<link rel="stylesheet" media="screen and (min-width: 769px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
	
	<!--タブレット用CSS-->
	<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_tablet.css">
	
	<!--スマホ用CSS-->
	<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="<?php echo get_stylesheet_directory_uri(); ?>/style_smart.css">

※以前は、絶対パスでCSSのURLを入れていましたが、引越しすると直さなければならなくなるので、phpで読み込む形に変更。

PC用CSSstyle.css
タブレット用CSSstyle_tablet.css
スマホ用CSSstyle_smart.css と3種類のcssファイルを用意します。


画像を自動伸縮(各style.css)

デバイスに合わせてヘッダ画像などは伸び縮みさせたいので、
3種のCSSファイルに共通事項として、

/* 画像を自動伸縮する */
img{
max-width: 100%;
height: auto;
width /***/:auto;
}

を入れます。
※ヘッダーのタイトル画像を背景固定にしている場合、自動伸縮しないので、通常のimg srcに切り替えます。


スマホでズームさせたいいかどうか(header.php)

header.phpのヘッダー部分に下記を記述します。

<!DOCTYPE html> 
<html>
<head>
	<!--	スマホ ズームさせない場合 -->
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	
	
	<!--	スマホ ズームさせる場合 -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">


レスポンシブ、その他の調整

その他の細かい設定は、テーマの内容によっても変わってくるので、随時確認しながら変えていく形です。


その他、追記したものメモ

各CSSの
/**********************************************************
基本body
**********************************************************/

に下記を追加
  ↓

overflow-x:hidden; /* 横のスクロールバーを消す */
-webkit-text-size-adjust: 100%; /* スマホ用 */


チェックツール
www.responsinator.com

最後にGoogleモバイル フレンドリーでチェック。
Googleモバイル フレンドリーテスト